<html>

<style>
    * {
        margin: 0;
    }

    #content {
        color: white;
        position: absolute;
        left: -20px;
        top: -10px;
        white-space: pre-wrap;
        height: 200px;
        overflow: auto;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../three.js-r151/build/three.module.js",
		"three/addons/": "../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="content">
        LatheGeometry可以利用一个2D轮廓，经过旋转变换生成一个3D的几何体曲面。
        叹为观止呀，真神奇
    </div>
    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // 1. 必须创建的三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();

        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(10, 10, 20)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);

        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render)
        }
        render();

        // 2. 设置相机控件轨道控制器OrbitControls
        new OrbitControls(camera, canvasDom);

        // 3. 旋转线条成立方体
        // Vector2表示的三个点坐标，三个点构成的轮廓相当于两端直线相连接
        const pointsArr = [
            new THREE.Vector2(2, 3),
            new THREE.Vector2(5, 0),
            new THREE.Vector2(4, -3)
        ];
        // LatheGeometry：pointsArr轮廓绕y轴旋转生成几何体曲面
        // pointsArr：旋转几何体的旋转轮廓形状
        const geometry = new THREE.LatheGeometry(pointsArr);
        // 旋转圆周方向几何体细分精度, 默认是12
        // const geometry = new THREE.LatheGeometry(pointsArr, 30);

        const material = new THREE.LineBasicMaterial({ color: 'white' });
        const line = new THREE.Line(geometry, material);
        scene.add(line)

        // 通过二维样条曲线SplineCurve生成一个光滑的曲线旋转轮廓。
        {
            // 通过三个点定义一个二维样条曲线
            const curve = new THREE.SplineCurve([
                new THREE.Vector2(2, 3),
                new THREE.Vector2(5, 0),
                new THREE.Vector2(4, -3)
            ]);
            //曲线上获取点,作为旋转几何体的旋转轮廓, 非常密集
            // const pointsArr = curve.getPoints(2);
            const pointsArr = curve.getPoints(6);
            // LatheGeometry：pointsArr轮廓绕y轴旋转生成几何体曲面
            const geometry = new THREE.LatheGeometry(pointsArr);
            const material = new THREE.LineBasicMaterial({ color: 'purple' });
            const line = new THREE.Line(geometry, material);
            line.position.z = 12
            scene.add(line)
        }

    </script>
</body>

</html>